<style>
    canvas{
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
</style>
<div id="page-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header">
                <span>数据统计</span>
            </h3>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <ul class="nav nav-tabs" id="myTab">
                        <li><a href="/User/Applications/comment">祝福列表</a></li>
                        <li><a href="/User/Applications/user">参加用户</a></li>
                        <li class="active"><a href="javascript:;">数据统计</a></li>
                    </ul>
                </div>
                <div class="panel-body">
                    <div class="form-horizontal">
                        <div class="tab-content">
                            <div class="tab-pane active">
                                <div class="panel-body">
                                    <form class="inline" action="<?php echo '/User/Applications/statistics';?>">
                                        <div class="form-group">
                                            <label class="col-sm-1 control-label">开始时间:</label>

                                            <div class="col-lg-3">
                                                <input class="form-control" id="date-picker1" name="start_date" value="<?php
                    echo I('get.start_date', '', '');?>" placeholder="请输入开始时间">
                                            </div>
                                            <label class="col-sm-1 control-label">结束时间:</label>

                                            <div class="col-lg-3">
                                                <input class="form-control" id="date-picker2" name="end_date" value="<?php
                    echo I('get.end_date', '', '');?>" placeholder="请输入结束时间">
                                            </div>
                                            <button class="btn btn-success" type="submit">查询</button>
                                        </div>
                                    </form>
                                    <canvas id="canvas"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/Public/js/chart/dist/Chart.bundle.js"></script>
<script src="/Public/js/chart/samples/utils.js"></script>
<script>
    var dates = {$dates};
    var pv = {$pv};
    var uv = {$uv};
    var config = {
        type: 'line',
        data: {
            labels: dates,
            datasets: [{
                label: "pv",
                backgroundColor: window.chartColors.red,
                borderColor: window.chartColors.red,
                data: pv,
                fill: false,
            }, {
                label: "uv",
                fill: false,
                backgroundColor: window.chartColors.blue,
                borderColor: window.chartColors.blue,
                data: uv,
            }]
        },
        options: {
            responsive: true,
            title:{
                display:true,
                text:'浏览情况'
            },
            tooltips: {
                mode: 'index',
                intersect: false,
            },
            hover: {
                mode: 'nearest',
                intersect: true
            },
            scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: '日期'
                    }
                }],
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: '数量'
                    }
                }]
            }
        }
    };

    window.onload = function() {
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myLine = new Chart(ctx, config);
    };

</script>
<script type="text/javascript" src="/Public/js/laydatenew/laydate.js"></script>
<script type="text/javascript">
    laydate.render({
        elem: '#date-picker1',
        type: 'date'
    });
    laydate.render({
        elem: '#date-picker2',
        type: 'date'
    });
</script>